import React, {Component} from 'react';
import {
  View,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  // TouchableHighlight,
  Text,
  AsyncStorage,
} from 'react-native';
import {StackActions, NavigationActions} from 'react-navigation';
import {InputItem, List, Toast, Portal} from '@ant-design/react-native';
import Ionicons from 'react-native-vector-icons/Feather';
import EntypoIcons from 'react-native-vector-icons/Entypo';
// import Toast, {DURATION} from 'react-native-easy-toast';
import {flex} from '../../utils';
// import {WModal} from 'react-native-smart-tip';
import api from '../../config/api';
class Login extends Component {
  static navigationOptions = ({navigation}) => ({
    headerTitle: '登录',
    headerRight: () => (
      <View style={flex}>
        <TouchableOpacity onPress={() => {navigation.state.params.onSetting()}} style={{marginRight: 12}}>
          <Ionicons name="settings" size={20} color="#ffffff" />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => {navigation.state.params.onSetting()}} style={{marginRight: 15}}>
          <Text style={{fontFamily: 'iconfont', fontSize: 20, color: '#ffffff' }}>{'\ue708'}</Text>
        </TouchableOpacity>
      </View>
    ),
  });

  componentDidMount() {
    this.props.navigation.setParams({onSetting: this.onSetting});
  }

  state = {
    account: '123',
    passWord: '123456',
    isPassWordShow: false,
  };

  onSetting = () => {
    Toast.info('setting ready');
  };

  onLogin = () => {
    const {account, passWord} = this.state;
    const postData = {
      mobile: account,
      password: passWord,
    };
    const key = Toast.loading('登陆中...');
    // api.xhrPost('/user/signin', postData).then(res => {
    //   const {token} = res;
    //   AsyncStorage.setItem('token', token);
    //   Portal.remove(key);
    //   const resetAction = StackActions.reset({
    //     index: 0,
    //     actions: [
    //       NavigationActions.navigate({routeName: 'TabBar'}), //要跳转到的页面名字
    //     ],
    //   });
    //   this.props.navigation.dispatch(resetAction);
    // });
    Portal.remove(key);
    const resetAction = StackActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({routeName: 'TabBar'}), //要跳转到的页面名字
      ],
    });
    this.props.navigation.dispatch(resetAction);
  };

  onForgetPassword = () => {
    Toast.info('ForgetPassword');
  };

  render() {
    const {account, passWord, isPassWordShow} = this.state;
    return (
      <ScrollView
        automaticallyAdjustContentInsets={false}
        showsHorizontalScrollIndicator={false}
        keyboardShouldPersistTaps="always"
        showsVerticalScrollIndicator={false}>
        <List>
          <InputItem
            value={account}
            clear
            placeholder="请输入账号"
            onChange={value => {
              this.setState({
                account: value,
              });
            }}>
            账号
          </InputItem>
          <View style={{position: 'relative'}}>
            <InputItem
              value={passWord}
              placeholder="请输入密码"
              type={isPassWordShow ? '' : 'password'}
              onChange={value => {
                this.setState({
                  passWord: value,
                });
              }}>
              密码
            </InputItem>
            <TouchableOpacity onPress={() => {this.setState({isPassWordShow: !isPassWordShow})}} style={[styles.entyIconStyle, flex]}>
              <EntypoIcons name={isPassWordShow ? 'eye' : 'eye-with-line'} size={16} color="gray" />
            </TouchableOpacity>
          </View>
        </List>
        <View style={[flex]}>
          <TouchableOpacity style={styles.loginButton} onPress={this.onLogin}>
            <Text style={styles.loginButtonText}>登录</Text>
          </TouchableOpacity>
        </View>
        <View style={{paddingHorizontal: 20, paddingVertical: 15}}>
          <TouchableOpacity onPress={this.onForgetPassword}>
            <Text style={styles.forgetButtonText}>忘记密码</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  loginButton: {
    marginTop: 40,
    width: '90%',
    height: 40,
    backgroundColor: 'rgb(249, 119, 41)',
  },
  loginButtonText: {
    color: '#ffffff',
    fontSize: 20,
    textAlign: 'center',
    lineHeight: 40,
  },
  entyIconStyle: {
    position: 'absolute',
    width: 30,
    height: 30,
    right: 12,
    top: 6,
    // backgroundColor: 'red',
  },
  forgetButtonText: {
    color: 'rgb(84, 124, 189)',
  },
});

export default Login;
